import { getTopUsingGet } from '@/services/openApi-back/topController';
import { PageContainer } from '@ant-design/pro-components';
import ReactEcharts from 'echarts-for-react';
import React, { useEffect, useState } from 'react';

const TopInterfaceInfo: React.FC = () => {
  const [data, setData] = useState<API.InterFaceInfoVO[]>([]);
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    getTopUsingGet().then((res) => {
      if (res.data) {
        setData(res.data);
      }
    });
  }, []);
  const EchartsData = data.map((item) => {
    return {
      setLoading:true,
      value: item.totalNum,
      name: item.name,
    };
  });

  const option = {
    title: {
      text: '接口使用详情',
      // subtext: 'Fake Data',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '接口调用次数',
        type: 'pie',
        radius: '50%',
        data: EchartsData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
  return (
    <PageContainer title={'接口调用统计'}>
      <ReactEcharts
        loadingOption={{
          showLoading: loading,
        }}
        option={option}
      />
    </PageContainer>
  );
};

export default TopInterfaceInfo;
